<template>
    <div class = 'mysearch'>
        <div class = 'top'>
            <div class = 'back'>
                <router-link :to = '{path : "/movie",query : {name : cityName,id : cityId}}'>返回</router-link>
                </div>
            <div class = 'input'>
                <i class = 'iconfont icon-sousuo'></i>
                <input type = 'text' placeholder = '请输入关键字' @keydown.enter = 'search' v-model = 'keyword'>
            </div>
            <div class = 'button' @click = 'search'>搜索</div>
        </div>
        <div class = 'result'>
            <div v-if = "!istrue && !iswait" class = 'resultNone'>
                输入正确的关键字才有结果哦..
            </div>
            <div v-if = "iswait" class = 'resultNone'>
                <waiting></waiting>
            </div>
            <div class = 'Clist' v-if = 'istrue && !iswait'>
                <ul>
                   <li v-for = '(item,index) in movieData'> 
                        <router-link :to = '{path:"/mdetail",query:{id:item.id}}'>
                            <div>
                                <div class = 'D-left'>
                                    <img :src = 'item.poster'>
                                </div>
                                <div class = 'D-middle'>
                                    <div class = 'title'>
                                        <i>{{item.name}}</i>
                                        <span>2D</span>
                                     </div>
                                     <div class = 'score'>
                                         <div v-if = 'item.score != 0'>
                                            观众评分  <span>{{item.score}}</span>
                                        </div>
                                        <div v-if = 'item.score == 0'>
                                            暂无评分
                                        </div>
                                     </div>
                                     <div class = 'time'>
                                        上映时间: <span>{{item.release}}</span>
                                     </div>
                                     <div>
                                        {{item.catogary}} 
                                     </div>               
                                </div> 
                                <div class = 'D-right'>
                                    <div>
                                        详情
                                    </div>    
                                </div>
                            </div>
                        </router-link>
                    </li>
                    <div>我也是有底线的~</div>
                </ul>
        </div>
        </div>
    </div>
</template>

<script>
import waiting from '@/components/waiting.vue';
export default{
    data(){
        return {
            isback : false,
            movieData : [],
            keyword : "",
            istrue : false,
            cityId : 0,
            cityName : '',
            iswait : false,
        }
    },
    components:{
        waiting,
    },
    methods:{
        search(){
            if(this.keyword == ''){
                this.istrue = false;
                return ;
            }
            this.iswait = true;
            axios.get(`https://apis.netstart.cn/maoyan/search/movies?keyword=${this.keyword}&ci=${this.cityId}`).then(
                data => {
                    this.movieData = data.data;
                    if(this.movieData.length == 0){
                        this.istrue = false;
                    }else{
                        this.istrue = true;
                    }
                    this.iswait = false;
                }
            )
        },
    },
   created(){
    //   console.log(this.$route.query)
        this.cityId = this.$route.query.cityId;
        this.cityName = this.$route.query.cityName;
   }
}
</script>
<style lang = 'scss'scoped>
body{
    .mysearch{
        position : absolute;
        top : 0px;
        width : 100%;
        height : 100%;
        z-index : 100;
        background-color : #f4f4f4;
        .top{
            height : 50px;
            background-color : white;
            padding : 10px 0;
            >div{
                float : left;
                height : 100%;
            }
            .back{
                font-size : 16px;
                color : #3e606f;
                width : 20%;
                text-align :center;
                line-height : 50px;
                border-radius : 10px;
                /* border : 1px solid #ff9900; */
            }
            .input{
                background-color : white;
                height : 100%;
                margin : 0px auto;
                width : 60%;
                border-radius : 5px;
                position : relative;
                input{
                    background-color : #f4f4f4;
                    position: absolute;
                    top : 5px;
                    height : 30px;
                    outline : none;
                    margin : 4px;
                    padding-left : 30px;
                    border : 0;
                    width : 100%;
                    z-index : 2;
                    border-radius : 10px;
                }
                i{
                    position: absolute;
                    top : 16px;
                    left : 12px;
                    z-index : 3;
                }
        }
            .button{
                width : 20%;
                float : right;
                font-size : 16px;
                color : #3e606f;
                width : 20%;
                text-align :center;
                line-height : 50px;
                border-radius : 10px;
            }
        }
        .result{
            .resultNone{
                height : 300px;
                line-height : 300px;
                text-align : center;
                font-size : 18px;
                color : gray;
            }
            .Clist{
                margin-bottom : 60px;
                >ul{
                    li{
                        background-color : white;
                        margin:2px 0;
                        padding : 10px;
                        box-sizing : border-box;
                        font-size : 15px;
                        div{
                            &::after{
                                content : '';
                                display : block;
                                clear : both;
                            }   
                                .D-left{
                                float : left;
                                width : 70px;
                                height : 100%;
                                margin-right : 12px;
                                img{
                                    width : 100%;
                                    height : 100%;
                                    border-radius : 6px;
                                }
                            }
                            .D-middle{
                                float : left;
                                width : 60%;
                                color : gray;
                                div{
                                    margin : 4px 0 ;
                                }
                                .title{
                                    margin-top : 0px;
                                    color : black;
                                    font-size : 18px;
                                    position : relative;
                                    i{
                                        display:inline-block;
                                        max-width : 80%;
                                        overflow : hidden;
                                        text-overflow : ellipsis;
                                        white-space : nowrap;
                                        padding-right : 4px;
                                    }
                                    span{
                                        /* position : absolute;
                                        right : 10px;
                                        top : 4px; */
                                        vertical-align : middle;
                                        margin-top : -12px;
                                        margin-left : 10px;
                                        display : inline-block;
                                        width : 25px;
                                        height : 20px;
                                        text-align : center;
                                        border-radius : 5px;
                                        font-size : 14px;
                                        color : white;
                                        background-color : #ccc;
                                    }
                                }
                                .score{
                                    height : 22px;
                                    span{
                                        color : #FF9900;
                                        margin-left : 5px;
                                    }
                                }
                                .time{
                                    margin-bottom : 5px;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                        span{
                                            color : #004358;
                                            margin-left : 5px;
                                        }
                                }
                            }
                            .D-right{
                                float : right;
                                height : 80px;
                                padding-top:35px;
                                box-sizing : border-box;
                                >div{
                                    padding: 3px 10px;
                                    color : #FF9900;
                                    border:1px solid #FF9900;
                                    border-radius : 5px;
                                }
                            }
                        }


                    }
                    >div{
                        height : 50px;
                        line-height : 50px;
                        text-align : center;
                        font-size : 18px;
                        color : gray;
                    }
                }
            }
        }
    }
}

</style>